import { AllComponentProps } from "@/defaultProps";
import { mapPropsToFroms } from "@/propsMaps";
import { map, reduce } from "lodash-es";
import { computed, defineComponent, PropType, VNode } from "vue";
import ImageSrcProp from "./ImageSrcProp.vue";
import ShadowPicker from "./ShadowPicker.vue";
import ColorPicker from "./ColorPicker.vue";
import BackgroundProcesser from "./BackgroundProcesser.vue";
import {
  Input,
  Textarea,
  InputNumber,
  Slider,
  Select,
  SelectOption,
  Switch,
  Radio,
  RadioGroup,
  RadioButton,
  Checkbox,
} from "ant-design-vue";

const mapToComponent = {
  "a-textarea": Textarea,
  "a-input": Input,
  "a-input-number": InputNumber,
  "a-slider": Slider,
  "a-select": Select,
  "a-select-option": SelectOption,
  "a-switch": Switch,
  "a-radio": Radio,
  "a-radio-group": RadioGroup,
  "a-radio-button": RadioButton,
  "a-checkbox": Checkbox,
  // "ImageSrcProp":  ImageSrcProp,
  // "ShadowPicker":  ShadowPicker,
  // "ColorPicker":  ColorPicker,
  // "BackgroundProcesser":  BackgroundProcesser
} as any;

interface FormProps {
  component: string;
  subComponent?: string;
  value: string;
  extraProps?: { [key: string]: any };
  text?: string;
  options?: { text: string | VNode; value: any; label?: string }[];
  valueProp: string;
  eventName: string;
  events: { [key: string]: (e: any) => void };
}

export default defineComponent({
  name: "props-table",
  props: {
    props: {
      type: Object as PropType<AllComponentProps>,
      required: true,
    },
  },
  emits: ["change"],
  setup(props, context) {
    const finalProps = computed(() => {
      return reduce(
        props.props,
        (result, value, key) => {
          const newKey = key as keyof AllComponentProps;
          const item = mapPropsToFroms[newKey];
          if (item) {
            const {
              valueProp = "value",
              eventName = "change",
              initalTransform,
              afterTransform,
              options,
            } = item;
            if (options) {
              console.log(options);
            }
            const newItem: FormProps = {
              ...item,
              value: initalTransform ? initalTransform(value) : value,
              valueProp,
              eventName,
              events: {
                [eventName]: (e: any) => {
                  context.emit("change", {
                    key,
                    value: afterTransform ? afterTransform(e) : e,
                  });
                },
              },
            };
            result[newKey] = newItem;
          }
          return result;
        },
        {} as { [key: string]: FormProps }
      );
    })
    return () => 
      <div class="props-table">
        {
          Object.keys(finalProps.value).map((key) => {
            const item = finalProps.value[key];
            const ComponentName = mapToComponent[item.component];
            const SubComponent = item.subComponent ? mapToComponent[item.subComponent] : null;
            const props = {
              [item.valueProp] : item.value,
              ...item.extraProps,
              ...item.events 
            }
            return (
              <div key={key} class="prop-item">
                {item.text && <span class="label">{item.text}</span>}
                <div class="prop-component">
                  <ComponentName {...props}>
                    {
                      item.options && item.options.map((option) => {
                        return(
                          <SubComponent value={option.value}>{option.text}</SubComponent>
                        )
                      })
                    }
                  </ComponentName>
                </div>
              </div>
            );
          })
        }
      </div>
  }
})
